<template>
    <!--主页的容器-->
    <div class="indexContainer">
        <el-container>
            <!-- 侧边栏-->
            <el-aside :width="isCollapse?'4%':'16%'">
                <!-- 展开/收起 -->
                <div class="collapseBox" @click="isCollapse = !isCollapse">|||</div>
                <!--菜单栏-->
                <el-menu
                    :collapse="isCollapse"
                    :collapse-transition="false"
                    :router="true"
                    active-text-color="#ffd04b"
                    background-color="#001529"
                    class="el-menu-vertical"
                    default-active="2"
                    text-color="#fff"
                    @close="handleClose"
                    @open="handleOpen"
                >
                    <!-- 菜单树-->
                    <menu-tree :menu-list="menuList"></menu-tree>
                </el-menu>
            </el-aside>
            <el-container>
                <!-- 顶部区域-->
                <el-header>
                    <el-dropdown>
                        <i class="el-icon-setting" style="margin-right:15px "></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item @click.native="edit">编辑桌面</el-dropdown-item>
                            <el-dropdown-item @click.native="endEdit">保存</el-dropdown-item>
                            <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span v-text="userInfo.username"></span>
                </el-header>
                <!--主要区域-->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import menuTree from '@/components/menuTree';
import config from '@/config/index';
import { mapMutations } from 'vuex';

export default {
    name: 'index',
    created() {
        this.menuList = config.menuConfig;
    },
    data() {
        return {
            userInfo: {
                username: 'kinjaze'
            },
            menuList: [],
            isCollapse: false
        };
    },
    components: {
        menuTree
    },
    methods: {
        ...mapMutations(['edit']),
        ...mapMutations(['endEdit']),
        //退出登录
        logout() {
            console.log('ok');
            this.$router.push('/login');
        },
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }
};
</script>
<style lang="less" scoped src="../assets/less/index.less">
</style>
